<template>
  <div class="books">
    <el-form ref="searchForm" :inline="true" :model="searchMap" class="item">
      <el-form-item class="items1" prop="bookId">
        <el-input v-model="searchMap.bookId" placeholder="图书编号"></el-input>
      </el-form-item>
      <el-form-item class="items2" prop="bookName">
        <el-input
          v-model="searchMap.bookName"
          placeholder="图书名称"
        ></el-input>
      </el-form-item>
      <el-form-item class="items3" prop="bookISBN">
        <el-input v-model="searchMap.bookISBN" placeholder="ISBN"></el-input>
      </el-form-item>
      <el-form-item class="items4" prop="bookCategory">
        <el-input
          v-model="searchMap.bookCategory"
          placeholder="图书类别"
        ></el-input>
      </el-form-item>
      <el-form-item class="items5" prop="bookTag">
        <el-input v-model="searchMap.bookTag" placeholder="图书标签"></el-input>
      </el-form-item>
      <el-form-item>
        <button type="primary" @click="fetchData" class="buttons1">查询</button>
        <button @click="resetForm('searchForm')" class="buttons2">重置</button>
        <button @click="dialogFormVisible = true" class="buttons3">新增</button>
      </el-form-item>
    </el-form>

    <el-table :data="list" style="width: 100%; font-size: 2px">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item>
              <span>图书编号：</span>
              <span>{{ props.row.bookId }}</span>
            </el-form-item>
            <el-form-item>
              <span>ISBN：</span>
              <span>{{ props.row.bookISBN }}</span>
            </el-form-item>
            <el-form-item>
              <span>原价：</span>
              <span>{{ props.row.bookOprice }}元</span>
            </el-form-item>
            <el-form-item>
              <span>现价：</span>
              <span>{{ props.row.bookPprice }}元</span>
            </el-form-item>
            <el-form-item>
              <span>简介：</span>
              <span>{{ props.row.bookSynopsis }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column type="index" label="序号" width="46"> </el-table-column>

      <el-table-column prop="" label="图片" width="80">
        <template slot-scope="scope">
          <!-- <img class="imgs" :src="scope.row.bookUrl"> -->
          <el-image
            class="imgs"
            :src="scope.row.bookUrl"
            :preview-src-list="look(scope.row.bookUrl)"
          >
          </el-image>
        </template>
      </el-table-column>

      <el-table-column prop="bookName" label="图书名称"></el-table-column>
      <el-table-column
        prop="bookPprice"
        label="现价(元)"
        width="70"
      ></el-table-column>
      <el-table-column
        prop="bookDiscount"
        label="折扣"
        width="60"
      ></el-table-column>
      <el-table-column
        prop="bookCounts"
        label="库存(件)"
        width="70"
      ></el-table-column>
      <el-table-column prop="bookCategory" label="图书类型" width="90">
      </el-table-column>
      <el-table-column prop="bookTag" label="标签" width="60">
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.bookId)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.bookId, scope.row.bookName)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新增书籍" width="460px" :visible.sync="dialogFormVisible">
      <el-form
        :rules="rules"
        ref="pojo"
        label-width="80px"
        label-position="right"
        style="width: 400px"
        :model="pojo"
      >
        <el-form-item label="图书名称" style="height: 36px" prop="bookName">
          <el-input v-model="pojo.bookName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="原价" style="height: 36px" prop="bookOprice">
          <el-input v-model="pojo.bookOprice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="现价" style="height: 36px" prop="bookPprice">
          <el-input v-model="pojo.bookPprice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存" style="height: 36px" prop="bookCounts">
          <el-input v-model="pojo.bookCounts" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图片地址" style="height: 36px" prop="bookUrl">
          <el-input v-model="pojo.bookUrl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="ISBN" style="height: 36px" prop="bookISBN">
          <el-input v-model="pojo.bookISBN" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="图书类型"
          prop="bookCategoryId"
          style="height: 36px"
        >
          <el-select v-model="pojo.bookCategoryId" placeholder="请选择图书类型">
            <el-option
              v-for="option in bookCategorys"
              :key="option.bookClassifyId"
              :label="option.bookClassify"
              :value="option.bookClassifyId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标签" style="height: 36px" prop="bookTag">
          <el-input v-model="pojo.bookTag" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="简介" style="height: 10px" prop="bookSynopsis">
          <el-input v-model="pojo.bookSynopsis" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOneBook('pojo')">提 交</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="编辑图书信息"
      width="460px"
      :visible.sync="dialogFormVisible2"
    >
      <el-form
        :rules="rules"
        ref="pojoEdit"
        label-width="80px"
        label-position="right"
        style="width: 400px"
        :model="pojoEdit"
      >
        <el-form-item label="图书名称" style="height: 36px" prop="bookName">
          <el-input v-model="pojoEdit.bookName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="原价" style="height: 36px" prop="bookOprice">
          <el-input v-model="pojoEdit.bookOprice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="现价" style="height: 36px" prop="bookPprice">
          <el-input v-model="pojoEdit.bookPprice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存" style="height: 36px" prop="bookCounts">
          <el-input v-model="pojoEdit.bookCounts" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图片地址" style="height: 36px" prop="bookUrl">
          <el-input v-model="pojoEdit.bookUrl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="ISBN" style="height: 36px" prop="bookISBN">
          <el-input v-model="pojoEdit.bookISBN" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="图书类型"
          prop="bookCategoryId"
          style="height: 36px"
        >
          <el-select
            v-model="pojoEdit.bookCategoryId"
            placeholder="请选择图书类型"
          >
            <el-option
              v-for="option in bookCategorys"
              :key="option.bookClassifyId"
              :label="option.bookClassify"
              :value="option.bookClassifyId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标签" style="height: 36px" prop="bookTag">
          <el-input v-model="pojoEdit.bookTag" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="简介" style="height: 10px" prop="bookSynopsis">
          <el-input
            v-model="pojoEdit.bookSynopsis"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="saveOneBook('pojoEdit')"
          >提 交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import bookApi from "@/api/books";

export default {
  data() {
    return {
      list: [],
      bookCategorys: [],
      searchMap: {
        bookId: "",
        bookName: "",
        bookISBN: "",
        bookCategory: "",
        bookTag: "",
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      pojo: {
        bookName: "",
        bookOprice: "",
        bookPprice: "",
        bookCounts: "",
        bookUrl: "",
        bookISBN: "",
        bookCategoryId: "",
        bookTag: "",
        bookSynopsis: "",
      },
      pojoEdit: {
        bookId: "",
        bookName: "",
        bookOprice: "",
        bookPprice: "",
        bookCounts: "",
        bookUrl: "",
        bookISBN: "",
        bookCategoryId: "",
        bookCategory: "",
        bookTag: "",
        bookSynopsis: "",
      },
      rules: {
        bookName: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
        ],
        bookOprice: [
          { required: true, message: "原价不能为空", trigger: "blur" },
        ],
        bookPprice: [
          { required: true, message: "现价不能为空", trigger: "blur" },
        ],
        bookCategoryId: [
          { required: true, message: "图书类型不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    look(url) {
      let photo = [];
      photo.push(url);
      return photo;
    },
    fetchData() {
      bookApi.search(this.searchMap).then((response) => {
        this.list = response.data;
      });
      bookApi.getAllBookClassify().then((response) => {
        this.bookCategorys = response.data;
      });
    },
    handleEdit(bookId) {
      bookApi.getOneBook(bookId).then((response) => {
        (this.pojoEdit.bookId = response.data[0].bookId),
          (this.pojoEdit.bookName = response.data[0].bookName),
          (this.pojoEdit.bookOprice = response.data[0].bookOprice),
          (this.pojoEdit.bookPprice = response.data[0].bookPprice),
          (this.pojoEdit.bookCounts = response.data[0].bookCounts),
          (this.pojoEdit.bookUrl = response.data[0].bookUrl),
          (this.pojoEdit.bookISBN = response.data[0].bookISBN),
          (this.pojoEdit.bookCategoryId = response.data[0].bookCategoryId),
          (this.pojoEdit.bookCategory = response.data[0].bookCategory),
          (this.pojoEdit.bookTag = response.data[0].bookTag),
          (this.pojoEdit.bookSynopsis = response.data[0].bookSynopsis);
      });
      this.dialogFormVisible2 = true;
    },
    saveOneBook(fromName) {
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          bookApi.editOneBook(this.pojoEdit).then((response) => {
            this.fetchData();
            this.dialogFormVisible2 = false;
            this.$message({
              type: "success",
              message: "修改成功!",
            });
          });
        } else {
        }
      });
    },
    handleDelete(bookId, bookName) {
      this.$confirm("此操作将永久删除" + bookName + ", 是否继续?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          bookApi.deleteOneBook(bookId).then((response) => {
            if (response.data == 1) {
              this.fetchData();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "info",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    resetForm(fromName) {
      this.$refs[fromName].resetFields();
      this.fetchData();
    },
    addOneBook(fromName) {
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          bookApi.addOneBook(this.pojo).then((response) => {
            this.fetchData();
            this.dialogFormVisible = false;
            if (response.data == 1) {
              (this.pojo.bookName = ""),
                (this.pojo.bookOprice = ""),
                (this.pojo.bookPprice = ""),
                (this.pojo.bookCounts = ""),
                (this.pojo.bookUrl = ""),
                (this.pojo.bookISBN = ""),
                (this.pojo.bookCategoryId = ""),
                (this.pojo.bookTag = ""),
                (this.pojo.bookSynopsis = "");
            }
          });
        } else {
        }
      });
    },
  },
};
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
span {
  font-family: "华文隶书";
}
.item {
  height: 46px;
  margin: 4px 0px 0px 10px;
}
.buttons1 {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  background: #409eff;
  border-radius: 4px;
  border: white;
}
.buttons2 {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  border-radius: 4px;
  background: #a5ada6;
  border: white;
}
.buttons3 {
  width: 50px;
  height: 30px;
  margin-right: 0px;
  background: #40ff60;
  border-radius: 4px;
  border: white;
}
.books {
  width: 100%;
}
.imgs {
  width: 40px;
  height: 40px;
}
</style>